<template>
    <div class="head-bar">
        <yk-space align="center" :size="12" style="cursor: pointer;" @click="backHome">
            <img src="../../assets/LOGO.svg" class="logo">
            <span class="name">博客后台</span>
        </yk-space>
        <yk-space align="center" size="xl">
            <yk-badge :count="unreadCount">
                <IconMailOutline style="font-size:25px;cursor: pointer;" @click="changActive(true)"/>
            </yk-badge>
            <yk-avatar icon="yike-xin">
                <icon-yike1-outline />
            </yk-avatar>
            <div><yk-theme /></div>
            <yk-button @click="loginOut">退出</yk-button>
        </yk-space>
    </div>
    <Information :active="active" @close="changActive(false)" :page-size="8" @unreadCount="getUnreadMessageCount"/>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
import { Information } from '../reply/index.ts';
import {ref,onMounted} from 'vue';
import { useUserStore } from '../../stores/user.ts';
const route = useRoute();
const router = useRouter();
const active = ref<boolean>(false);
const userStore = useUserStore();

//返回总览页
const backHome = () => {
    router.push('/overview');
};

//打开消息框
const changActive = (e:boolean) => {
    active.value = e;
}

//是否登录验证
const isLogin = ()=>{
        // 如果是登录或注册页面，不执行登录验证
    if (route.path === '/login' || route.path === '/register') {
        return;
    }
    if(!userStore.token){
        router.push('/login');
    }
}

//私信未读数量
const unreadCount = ref<number>(0);
const getUnreadMessageCount = (count:number) => {
    unreadCount.value = count;
}

//退出登录
const loginOut = () => {
    userStore.token = '';
    userStore.username = '';
    userStore.id = -1;
    router.push('/login');
}


onMounted(() => {
   isLogin();
})

</script>

<style scoped lang="less">
.head-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background-color: @bg-color-l;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 @space-xl;
    .logo {
        height: 30px;
        width: 30px;
    }
    .name {
        font-size: 20px;
        font-weight: 600;
    }
}
</style>